<template>
  <div class="" id="home" :style="{minHeight: height+'px'}">
    <el-main>
      <!-- carousel走马灯 -->
      <div>
        <el-carousel trigger="click" :autoplay="true" height="500px">
          <!-- <el-carousel-item >
            <img src="../../assets/banner1.jpg" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img src="../../assets/banner2.jpg" alt="">
          </el-carousel-item> -->
          <el-carousel-item v-for="barnner in banners" :key="barnner.sort">
            <!-- {{barnner.bannerUrl}} -->
            <img :src="barnner.bannerUrl" alt="">
          </el-carousel-item>

          <!-- <el-carousel-item v-for="(barnner, index) in 4" :key="index">
            <h3 class="text-center">{{index}}</h3>
          </el-carousel-item> -->
        </el-carousel>
      </div>
      
      <!-- 需求简讯 -->
      <!-- <div class="demand-contanier require-back" >
        <p class="demand-title">最新需求</p>
        <p class="demand-des">浏览了解最新的需求， 并与需求方交流沟通，还可以发布新需求</p>
        <div class="" style="padding: 45px 170px;">
          <el-row :gutter="18">
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" v-for="{item, index} in 4" :key="index">
              <demand-card></demand-card>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6" style="margin-top: 45px;">
              <el-button type="success" round class="width-full" @click="openMessage()">查看更多</el-button>
            </el-col>
          </el-row>
        </div>
      </div> -->
      <!-- 动态简讯区域 -->
      <el-row class="main-width mx-auto mb-5">
        <el-col :span="16">
          <el-tabs v-model="enterpriseName" @tab-click="loadAdvisory" class="self-tab-style">
            <el-tab-pane label="通知公告" name="134A9C15597F11E892D5A46C2A38CB5E">
              <enterprise-list @selected-enter="openDetails" :datas="advData"></enterprise-list>
            </el-tab-pane>
            <el-tab-pane label="协会动态" name="1FD5A57D597F11E892D5A46C2A38CB5E">
              <enterprise-list @selected-enter="openDetails" :datas="advData"></enterprise-list>
            </el-tab-pane>
            <el-tab-pane label="产业新闻" name="24C1306A597F11E892D5A46C2A38CB5E">
              <enterprise-list @selected-enter="openDetails" :datas="advData"></enterprise-list>
            </el-tab-pane>
            <el-tab-pane label="会员新闻" name="29A9C63B597F11E892D5A46C2A38CB5E">
              <enterprise-list @selected-enter="openDetails" :datas="advData"></enterprise-list>
            </el-tab-pane>
          </el-tabs>
          <el-button type="success fr width-200 mt-5" plain round  @click="goto('advisory')">查看更多</el-button>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-tabs v-model="activeTall" class="self-tab-style no-bar">
            <el-tab-pane label="精彩话题" name="精彩话题">
              <talks-list :datas="talkData"></talks-list>
            </el-tab-pane>
          </el-tabs>
          <el-button type="success fr width-200 mt-5" plain round  @click="goto('topic')">查看更多</el-button>
        </el-col>
      </el-row>
      <!-- 明星企业 -->
      <div class="demand-contanier enterprise-back" >
        <p class="demand-title mb-3">推荐企业</p>
        <div class="main-width mx-auto">
          <el-row :gutter="18">
            <el-col :span="6"  v-for="(ep, index) in enterprise" :key="index">
              <celebrity-enterprise :ep="ep"></celebrity-enterprise>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :offset="6" class="my-5">
              <el-button type="success" round class="width-full"  @click="goto('eclist')">查看更多</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 功能操作区 -->
      <div class="main-width mx-auto d-flex justify-content-between" style="margin-top: 50px;margin-bottom: 40px;">
        <div v-for="(fun, index) in homeFuncs" :key="index">
          <div class="func" style="cursor: pointer;" @click="openFunc(fun)">
            <img :src="fun.icon" alt="" class="func-icon">
            <span>{{fun.name}}</span>
          </div>
        </div>
      </div>
      <!-- <el-row class="main-width mx-auto">
        <el-col :span="6" v-for="(fun, index) in homeFuncs" :key="index">
          <div class="func" style="cursor: pointer;" @click="openFunc(fun)">
            <img :src="fun.icon" alt="" class="func-icon">
            <span>{{fun.name}}</span>
          </div>
        </el-col>
      </el-row> -->
    </el-main>
    <!-- <back-top></back-top> -->
  </div>
</template>

<script>
import axios from 'axios'
import DemandCard from './DemandCard'
import CelebrityEnterprise from './CelebrityEnterprise'
import EnterpriseList from './EnterpriseList'
import TalksList from './TalksList'

let loadData = async function (self) {
  // 加载banner
  let bannersRes = await axios.post('/mscs/banner/findBannerBySystem', self.$paramsConvert({system: 'WEB'}))
  self.banners = bannersRes.data.data
  // console.log('11111111111', bannersRes);
  // self.banners.push(...bannersRes.data.data)
  // 加载资讯
  let params = {
    offset: 0,
    limit: 6,
    type: self.enterpriseName,
    search: ''
  }
  let advRes = await axios.post('/mscs/information/findInformationBasicByType', self.$paramsConvert(params))
  self.advData = advRes.data.data
  // 加载话题
  params.type = ""
  params.limit = 3
  let talkRes = await axios.post('/mscs/topic/findTopicBasicByType', self.$paramsConvert(params))
  self.talkData = talkRes.data.data
  // 加载企业
  params.limit = 8
  let epRes = await axios.post('/mscs/home/findEnterpriseBasic', self.$paramsConvert(params))
  let len = epRes.data.data.length
  if (len > 0 && len/2 === 4) {
    self.enterprise = epRes.data.data
  } else {
    self.enterprise = epRes.data.data.slice(0,4)
  }
}

  export default {
    components: {
      DemandCard,
      CelebrityEnterprise,
      EnterpriseList,
      TalksList
    },
    name: 'Home',
    data() {
     return {
       banners: [],
       advData: [], // 咨询列表
       talkData: [],
       enterprise: [],
       enterpriseName: '134A9C15597F11E892D5A46C2A38CB5E', // 企业动态默认激活
       activeTall: '精彩话题',
       homeFuncs: [
         {name: '会员申请', icon: 'static/huiyuanshenqing.png', pathName: 'vip', params: {pagename: '会员申请'}, requireLogin: true},
         {name: '职称评审', icon: 'static/zhichengpingshen.png', pathName: 'job', params: {pagename: '职称评审'}, requireLogin: true},
         {name: '工程奖申请', icon: 'static/gongchengjiangshenqing.png', pathName: 'awardapp', params: {pagename: '工程奖申请'}, requireLogin: true},
         {name: '活动报名', icon: 'static/huodongbaoming.png', pathName: 'advisory', params: {type: '活动列表'}, requireLogin: true},
         {name: '法律支持', icon: 'static/falvzhichi.png', pathName: 'legalsupport', requireLogin: false}
         
       ]
     };
   },
   mounted () {
     loadData(this)
   },
   methods: {
    //  根据点击的功能不同路由到相应的页面
     openFunc (func) {
       console.log('func', func);
       if (func.requireLogin &&  !this.$store.state.user.isLogin) {
         this.$openLogin()
       } else { 
         this.$router.push({name: func.pathName, params: func.params})
         this.$nextTick(() => {
           document.body.scrollTop = document.documentElement.scrollTop = 0
         })
       }
     },
     // 打开功能暂未开通提示
     openMessage() {
       this.$promptMsg()
      },
      // 根据不同加载更多按钮传入不同的name路由到对应的页面
      goto (str) {
        this.$router.push({name: str})
      },
      // 加载咨询
      loadAdvisory () {
        let params = {
          offset: 0,
          limit: 6,
          type: this.enterpriseName,
          search: ''
        }
        axios.post('/mscs/information/findInformationBasicByType', this.$paramsConvert(params)).then((res) => {
          if (res.data.code === 1) {
            this.advData = res.data.data
          }
        })
      },
      // 打开资讯详情
      openDetails (data) {
        const {href} = this.$router.resolve({
          name: 'eventdetails',
          query: {id: data.modelId || data.informationId, basicType: data.basicType, browseNumber: data.browseNumber, comments: data.comments}
        })
        window.open(href, '_blank')
      },
   },
   computed: {
     height () {
       let height = this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
       return height < 500 ? 500 : height
     }
   },
  }
</script>
<style scoped>
  /* 主要内容区域覆盖样式 */
  .el-main {
    padding: 0px;
  }
  /* 需求区域样式修改 */
  .demand-contanier {
    text-align: center;
    color: #FFFFFF;
    background: #696868;
    padding: 53px 0 0 0;
  }
  .require-back {
    background-image: url('../../assets/xuqiubeijing.jpg');
    background-repeat: no-repeat;
    background-position: 150px 80px;
  }
  .enterprise-back {
    background-image: url('../../assets/mingxingqiyebg.png');
  }
  .el-col {
    margin-top: 18px;
  }
  .demand-title {

    font-size: 28px;
    line-height: 28px;
    margin: 0px;
  }
  .el-card {
    border: none;
  }
  .demand-des {
    margin: 0px;
    line-height: 19px;
    font-size: 19px;
    margin-top: 26px;
  }

  .el-carousel__item img {
    /* max-width: 100%; */
    width: 100%;
    height: 500px;
    display: list-item;

  }
  /* 下部功能区域图片样式 */
  .func-icon {
    display: block;
    margin: 0 auto;
    margin-bottom: 15px;
  }
  .func span {
    font-size: 18px;
    color: #283C41;
  }
</style>
